﻿@model Fish.Models.Templates

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm("Create", "Templates", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Templates</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.TemplateImage,"Image", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <input type="file" name="uploadedImage" />
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Description, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Description)
                @Html.ValidationMessageFor(model => model.Description)
            </div>
        </div>
        <div class="form-group">
            @Html.Label("Available Tabs", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div id="ItemsZone" ondrop="dragBack(event)" ondragover="allowDrop(event)">
                    <img title="Supplies" class="cursorToHand" id="1" ondragstart="drag(event)" src="~/Repository/Icons/trolley.png" width="100" height="100" />
                    <img title="Transportation" class="cursorToHand" id="2" ondragstart="drag(event)" src="~/Repository/Icons/CarGrey.png" width="100" height="100" />
                    <img title="Wall Posts" class="cursorToHand" id="3" ondragstart="drag(event)" src="~/Repository/Icons/edit_comment.png" width="100" height="100" />
                    <img title="Customized Tabs" class="cursorToHand" id="4" ondragstart="drag(event)" src="~/Repository/Icons/customize.png" width="100" height="100" />
                </div>
            </div>
        </div>
        <div class="form-group">
            @Html.Label("Desired Tabs", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img id="dropIcon" src="~/Repository/Icons/drop.jpg" width="100" height="100" />
                </div>
            </div>
        </div>
        <div id="customTabsDiv" class="form-group" style="display:none">
            @Html.Label("Custom Tabs", new { @class = "control-label col-md-2"})
            <div class="col-md-10">
                <div id="AllTabs"></div>
                <span>New Tab</span>
                <button onclick="addTab()" style="border: 0; background: transparent" type="button">
                    <img src="~/Repository/Icons/plus.png" width="25" height="25" alt="Add" />
                </button>
            </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Create" id="createTemplate" class="btn btn-default" />
                </div>
            </div>
        </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    <style>
        .tabAttribute {
            margin: 5px;
            padding: 5px;
        }
         .TabClass {
            border: 1px solid #aaaaaa;
            margin: 10px;
            padding: 10px;
        }
        .TabClass {
            border: 1px solid #aaaaaa;
            margin: 10px;
            padding: 10px;
        } #dropZone {
            width: 465px;
            height: 140px;
            padding: 15px;
            border: 1px solid #aaaaaa;
            text-align: center;
        }
        #ItemsZone {
            width: 465px;
            height: 140px;
            padding: 15px;
            border: 1px solid #aaaaaa;
            text-align: center;
            margin-bottom: 15px;
        }
    </style>

    <script type="text/javascript">

        var TagsDefault = new Array(0,0,0,0);
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }
        function dragBack(ev) {
            //added part marwan
            var city = parseInt(ev.dataTransfer.getData("Text"));
               switch (city) {
                   case 1:
                       TagsDefault[0] = 0;
                    document.getElementById("dropZone").removeChild(document.getElementById("1"));
                    document.getElementById("ItemsZone").innerHTML += '<img title = "Supplies" class = "cursorToHand" id="1" ondragstart="drag(event)" src="/Repository/Icons/trolley.png" width="100" height="100" />';
                    break;
                   case 2:
                       TagsDefault[1] = 0;
                    document.getElementById("dropZone").removeChild(document.getElementById("2"));
                    document.getElementById("ItemsZone").innerHTML += '<img title="Transportation" class = "cursorToHand" id="2" ondragstart="drag(event)" src="/Repository/Icons/CarGrey.png" width="100" height="100" />';
                    break;
                   case 3:
                       TagsDefault[2] = 0;
                    document.getElementById("dropZone").removeChild(document.getElementById("3"));
                    document.getElementById("ItemsZone").innerHTML += '<img title="Wall Posts" class = "cursorToHand" id="3" ondragstart="drag(event)" src="/Repository/Icons/edit_comment.png" width="100" height="100" />';
                    break;
                   case 4:
                       TagsDefault[3] = 0;
                       document.getElementById("customTabsDiv").style.display = "none";
                    document.getElementById("dropZone").removeChild(document.getElementById("4"));
                    document.getElementById("ItemsZone").innerHTML += '<img title="Customized Tabs" class = "cursorToHand" id="4" ondragstart="drag(event)" src="/Repository/Icons/customize.png" width="100" height="100" />';
                    break;
            }
               if (document.getElementById("ItemsZone") != null)
                   if (document.getElementById("emptyIcon") != null)
                        document.getElementById("ItemsZone").removeChild(document.getElementById("emptyIcon"));

              if (document.getElementById("dropZone").children.length == 0)
                  document.getElementById("dropZone").innerHTML = '<img id="dropIcon" src="/Repository/Icons/drop.jpg" width="100" height="100" />';

            ev.preventDefault();
        }
        function drop(ev) {
            //added part marwan
            var city = parseInt(ev.dataTransfer.getData("Text"));
            switch (city) {
                case 1:
                    TagsDefault[0] = 1;
                   // alert(TagsDefault);
                    document.getElementById("ItemsZone").removeChild(document.getElementById("1"));
                    document.getElementById("dropZone").innerHTML += '<img title = "Supplies" class = "cursorToHand" id="1" ondragstart="drag(event)" src="/Repository/Icons/trolley.png" width="100" height="100" />';
                    break;
                case 2:
                    TagsDefault[1] = 1;
                    document.getElementById("ItemsZone").removeChild(document.getElementById("2"));
                    document.getElementById("dropZone").innerHTML += '<img title="Transportation" class = "cursorToHand" id="2" ondragstart="drag(event)" src="/Repository/Icons/CarGrey.png" width="100" height="100" />';
                    break;
                case 3:
                    TagsDefault[2] = 1;
                    document.getElementById("ItemsZone").removeChild(document.getElementById("3"));
                    document.getElementById("dropZone").innerHTML += '<img title="Wall Posts" class = "cursorToHand" id="3" ondragstart="drag(event)" src="/Repository/Icons/edit_comment.png" width="100" height="100" />';
                    break;
                case 4:
                    TagsDefault[3] = 1;
                    document.getElementById("customTabsDiv").style.display = "block";
                    document.getElementById("ItemsZone").removeChild(document.getElementById("4"));
                    document.getElementById("dropZone").innerHTML += '<img title="Customized Tabs" class = "cursorToHand" id="4" ondragstart="drag(event)" src="/Repository/Icons/customize.png" width="100" height="100" />';
                    break;
            }
            if (document.getElementById("dropZone").children.length > 1)
                if (document.getElementById("dropIcon") != null)
                document.getElementById("dropZone").removeChild(document.getElementById("dropIcon"));
            if (document.getElementById("ItemsZone").children.length == 0)
                document.getElementById("ItemsZone").innerHTML = '<img id="emptyIcon" src="/Repository/Icons/x.png" width="100" height="100" />';
            ev.preventDefault();
        }
    </script>

    <script>


        var TabNumber = 1;
        function addTab() {
            var AppendedDiv = document.getElementById("AllTabs");

            var contentDiv = document.createElement("div");
            contentDiv.id = "Tab" + TabNumber;
            contentDiv.className = "TabClass"

            var InsideDiv = document.createElement('div');
            var tabName = document.createElement("label");
            tabName.innerText = 'Tab Name:';

            var inputName = document.createElement("input");
            inputName.id = "TabName" + TabNumber;
            inputName.setAttribute('type', 'text');
            inputName.style.marginLeft = "5px";
            inputName.rows = 1;

            
            InsideDiv.appendChild(tabName);
            InsideDiv.appendChild(inputName);
           // InsideDiv.innerHTML += textHTML;

            var tabName2 = document.createElement("label");
            tabName2.innerText = 'Attributes: ';
            contentDiv.appendChild(InsideDiv);
            contentDiv.appendChild(tabName2);
            var textHTML = '<button onclick="addInsideTab(' + (TabNumber) + ')" style="border: 0; background: transparent" type="button">' +
                "<img src=\"/Repository/Icons/plus.png\" width=\"25\" height=\"25\" alt=\"Add\" />" +
                '</button>';
            contentDiv.innerHTML += textHTML;
            AppendedDiv.appendChild(contentDiv);
            addInsideTab(TabNumber);
            TabNumber++;

        }
        function addInsideTab(TabId) {
            var AppendedDiv = document.getElementById("Tab" + TabId);
            var contentDiv = document.createElement("div");
            contentDiv.className = "tabAttribute";
            var inputType = document.createElement("input");


            //        selectHTML += "<option value='1'> Supplies </option>";
            //       selectHTML += "<option value='2'> Transport </option>";
            //      selectHTML += "<option value='3'> Wall Posts </option>";

            var selectDiv = document.createElement('span');
            var selectHTML = "";
            selectHTML = "<select >";
            selectHTML += "<option value='Text'>Text Input</option>";
            selectHTML += "<option value='TextArea'>Text Area</option>";
            selectHTML += "<option value='Picture'>Picture</option>";
            selectHTML += "<option value='YesNo'>Yes/No</option>";
            selectHTML += "</select>";
            selectDiv.className = "inputValue";
            selectDiv.style.marginLeft = "5px";
            selectDiv.innerHTML = selectHTML;

            var inputName = document.createElement("input");
            inputName.id = 'inputText';
            inputName.setAttribute('type', 'text');
            inputName.rows = 1;

            contentDiv.appendChild(inputType);
            contentDiv.appendChild(selectDiv);
            AppendedDiv.appendChild(contentDiv);
        }
        $(document).ready(function () {


            $("#createTemplate").click(function () {
                var countTag = 1;
                var Tags = new Array();
                var i = 0;
                var count = 0;
                while (true) {
                    var Tag = document.getElementById("Tab" + (count + 1));
                    if (Tag == null) {
                        break;
                    }
                    var TagName = Tag.children[0].children[1].value;
                    Tags[i] = "*" + TagName;
                    //  alert(i + "" + Tags[i]);
                    i++;
                    //  var tagValues = {};
                    for (var j = 0; ; j++) {
                        if (Tag.children[j + 3] == null) {
                            break;
                        }
                        var TagText = Tag.children[j + 3].children[0].value;
                        var TagInputType = Tag.children[j + 3].children[1].children[0].value;
                        // tagValues[0] = TagText;
                        //  tagValues[1] = TagInputType;
                        Tags[i] = TagText;
                       // alert(i + "" + Tags[i]);
                        i++;
                        Tags[i] = TagInputType;
                       // alert(i + "" + Tags[i]);
                        i++
                    }
                    count++;
                }

                $.ajax({
                    type: "POST",
                    url: "/Templates/SaveTabs",
                    dataType: "json",
                    contentType: 'application/json; charset=utf-8',//this is important!!
                    data: JSON.stringify({ hopa: Tags, lala: TagsDefault }),
                    success: function (data, textStatus, xhr) {
                        //window.location.href = data.redirectToUrl;
                        //  alert("Success");
                    },
                    error: function (xhr, ajaxOptions, error) {
                        //  alert(xhr.status);
                        //    alert('Error: ' + xhr.responseText);
                    },
                    traditional: true

                });
            });
        });

    </script>
    @Scripts.Render("~/bundles/jqueryval")
}
